<template>
  <div id="chart" :style="{ height: height, width: width }"></div>
</template>

<script>
import { getCurrentInstance } from "vue";

import china from "@/assets/json/zg.json";
import resize from "./mixins/resize";

export default {
  name: "SctterComp",
  mixins: [resize],
  props: {
    width: {
      type: String,
      default: "200px",
    },
    height: {
      type: String,
      default: "200px",
    },
  },
  mounted() {
    // 渲染图表
    const { proxy } = getCurrentInstance();
    this.chart = proxy.$echarts.init(document.getElementById("chart"));
    proxy.$echarts.registerMap("zg", china);

    const aspectScaleVal = 0.77;

    let options = {
      grid: { right: 0, left: 0, top: 0, bottom: 0 },
      legend: { show: false },
      backgroundColor: "#333",
      geo: [
        {
          id: "GEO_01",
          map: "zg",
          selectedMode: "single",
          aspectScale: aspectScaleVal,
          roam: false,
          zlevel: 2,
          label: { normal: { show: false }, emphasis: { show: false } },
          itemStyle: {
            normal: {
              borderColor: "#1bb6f3",
              borderWidth: 1,
              areaColor: "transparent",
              shadowColor: "#123867",
              shadowOffsetX: 0,
              shadowOffsetY: 0,
            },
            emphasis: {
              borderColor: "#1bb6f3",
              borderWidth: 1,
              areaColor: "transparent",
            },
          },
          select: {
            label: { show: false },
            itemStyle: {
              borderColor: "#1bb6f3",
              borderWidth: 1,
              areaColor: "transparent",
            },
          },
        },
        {
          id: "GEO_03",
          silent: false,
          map: "zg",
          aspectScale: aspectScaleVal,
          roam: false,
          zlevel: 1,
          label: {
            normal: {
              show: true,
              color: "#24B57C00",
              fontSize: 14,
              fontFamily: "zaozigongfangyueheichangui",
              rotate: 0,
            },
            emphasis: { show: true, color: "#24B57C00" },
          },
          itemStyle: {
            normal: {
              borderColor: "#1bb6f3",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "RGBA(13,49,104,0.8)" },
                  { offset: 1, color: "RGBA(13,49,104,0.8)" },
                ],
                globalCoord: false,
              },
            },
            emphasis: {
              borderColor: "#1bb6f3",
              borderWidth: 1,
              areaColor: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.8,
                colorStops: [
                  { offset: 0, color: "RGBA(13,49,104,0.8)" },
                  { offset: 1, color: "RGBA(13,49,104,0.8)" },
                ],
                globalCoord: false,
              },
            },
          },
        },
      ],
      series: [
        {
          type: "map",
          map: "zg",
          aspectScale: aspectScaleVal,
          zoom: 1,
          roam: false,
          showLegendSymbol: false,
          geoIndex: 1,
          silent: false,
          zlevel: 1,
          data: [
            { name: "甘肃省", value: "35", color: "#fff" },
            { name: "浙江省", value: "35", color: "#fff" },
          ],
        },
      ],
      visualMap: {
        show: false,
        type: "piecewise",
        top: "auto",
        right: "auto",
        left: "75%",
        bottom: "10%",
        itemWidth: 50,
        itemHeight: 40,
        pieces: [
          { min: 40, color: "RGBA(13,49,104,0.8)" },
          { min: 30, max: 40, color: "rgba(255, 132, 50, 0.8)" },
          { min: 20, max: 30, color: "rgba(50, 225, 156, 0.8)" },
          { min: 10, max: 20, color: "rgba(255, 253, 50, 0.8)" },
          { max: 10, color: "RGBA(13,49,104,0.8)" },
        ],
        outOfRange: { color: ["RGBA(13,49,104,0.8)"] },
        textStyle: { color: "#fff", fontSize: 30 },
        hoverLink: true,
        zlevel: 3,
      },
    };

    this.chart.setOption(options);

    // 事件
    this.chart.on("click", function (params) {
      console.log(params);
    });
    // 分辨率调整刷新图表
    window.onresize = () => {
      this.chart.resize();
    };
  },
  methods: {
    Refresh() {
      console.log(this.options);
      this.chart.setOption(this.options);
    },
  },
};
</script>
